<template>
	<view style="width: 112rpx; height: 80rpx; margin-left: 30rpx;  padding-bottom: 20rpx;  ">
		<text style="font-weight: 500; font-style: normal;font-size: 56rpx;">消息</text>
	</view>
	<view class="box">
		
		<view class="service-tips" >
			<view class="servise-card">
				<view class="service-item">
					<view class="left-item-service-2">
						<image src="/static/常用_消息.png" mode=""  style="width: 40rpx; height: 40rpx;"></image>
					</view>
					<view class="text-item-service" >
						<view class="reminder-item">在线咨询</view>
						<view class="doctor-doctor">查看和医生的聊天信息</view>
					</view>
					<view class="icon-item-service">
						<view class="icon-image">
							<image class="left-image" src="/static/icons/u1462.png" mode=""></image>
							<image class="right-image" src="/static/icons/u1334.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<view class="servise-card">
				<view class="service-item">
					<view class="left-item-service">
						<image src="/static/icons/u2597.png" mode=""></image>
					</view>
					<view class="text-item-service">
						<view class="reminder-item">服务消息</view>
						<view class="doctor-doctor">签约与服务相关提醒</view>
					</view>
					<view class="icon-item-service">
						<view class="icon-image">
							
							<image class="right-image" src="/static/icons/u1334.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			
			<view class="servise-card">
				<view class="service-item">
					<view style="" class="left-item-service-1">
						<image src="/static/设置.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
					</view>
					<view class="text-item-service" >
						<view class="reminder-item">系统消息</view>
						<view class="doctor-doctor">系统消息提醒</view>
					</view>
					<view class="icon-item-service">
						<view class="icon-image">
							
							<image class="right-image" src="/static/icons/u1334.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>

</script>

<style>
	.service-tips {
		
		overflow: hidden;
	}
	  
  
	.service-text {
		margin: 0 32rpx;
		font-size: 40rpx;
		color: #333333;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
	}

	.servise-card {
		margin: 30rpx 32rpx;
		width: 670rpx;
		height: 176rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		border: 1rpx solid #E4EBF4;
		box-shadow: 0rpx 4rpx 8rpx 0rpx #f3f3f3;
	}

	.service-item {
		padding: 40rpx 30rpx;
		display: flex;
		
	}

	.left-item-service {
		width: 88rpx;
		height: 88rpx;
		background-color: #FFF8E4;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.left-item-service-2 {
		width: 88rpx;
		height: 88rpx;
		background-color: #FFF8E4;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
			 background-color: rgba(41, 132, 248, 0.0980392156862745);
	}
	.left-item-service-1 {
		width: 88rpx;
		height: 88rpx;
		background-color: #FFF8E4;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		    background-color: rgba(40, 208, 148, 0.0980392156862745);
	}
	

	
.left-item-service image {
  width: 40rpx;
  height: 40rpx;
}
	.text-item-service {
		width: 420rpx;
		height: 50rpx;

		margin-left: 30rpx;
	}

	.reminder-item {
		font-size: 36rpx;
		color: #333333;
		padding-bottom: 10rpx;
	}

	.doctor-doctor {
		white-space: nowrap;
		
		overflow: hidden;
		
			text-overflow: ellipsis;
		/* 超出显示省略号 */
		width: 420rpx;
		height: 50rpx;
		font-size: 24rpx;
		color: #999999;
	}

	.icon-image {
		margin-top: 25rpx;
		margin-left: 20rpx;
	}
	.left-image {
		width: 16rpx;
		height: 16rpx;
	}
		.right-image {
			width: 14rpx;
			height: 24rpx;
			margin-left: 20rpx;
		}
		.box{
			height: 100vh;
			background-color: #f6fafd   ;
		}
		
</style>